<template>
	<view style="padding-top: 30upx;">
		<view style="display: flex;justify-content: center;height: 90upx;align-items: center;" v-if="form.account">
			二维码所属账号：{{form.account}}</view>
		<u-form :model="form" ref="uForm1" label-width="160" :rules="rules">
			<view v-if="formType==='1'|| formType==='3'"
				style="width: 690upx;margin-left: 30upx;box-shadow: 0 0 10upx #C0C4CC;padding: 30upx;border-radius: 16upx;">
				<view style="font-weight: bold;">驾驶员信息</view>

				<u-form-item label="驾驶员姓名" prop="驾驶员姓名">
					<u-input v-model="form['驾驶员姓名']" placeholder="请输入" />
					<view slot="right">
						<view @click="openCarUserNameQuickPicker">
							<u-icon name="order" size="30"></u-icon>
							<text style="font-size: 26upx;">历史记录</text>
						</view>

					</view>
				</u-form-item>
				<u-form-item label="联系电话" prop="联系电话">
					<u-input type="number" v-model="form['联系电话']" maxlength="11" />
					<view slot="right">
						<view @click="openPhoneNumQuickPicker()">
							<u-icon name="order" size="30"></u-icon>
							<text style="font-size: 26upx;">历史记录</text>
						</view>
					</view>

				</u-form-item>

				<!-- <u-form-item label="开关"><u-switch slot="right" v-model="switchVal"></u-switch></u-form-item> -->
			</view>
			<view style="height: 30upx;"></view>
			<view v-if="formType==='1'|| formType==='3'"
				style="width: 690upx;margin-left: 30upx;box-shadow: 0 0 10upx #C0C4CC;padding: 30upx;border-radius: 16upx;">
				<view style="font-weight: bold;">车辆信息</view>
				<u-form-item label="车辆类型" prop="类型名称">
					<text v-if="formType==='3'">
						原料车辆
					</text>
					<text v-else>
						<text
							v-if="userInfo.AccountInfo">{{ userInfo.AccountInfo.type === '1' ? '原料车辆' : '矿粉车辆' }}</text>
					</text>
					<!-- <u-input @click="carTypePickerShow = true" placeholder="请选择车辆类型" v-model="form['类型名称']" disabled /> -->
				</u-form-item>
				<u-form-item label="车牌号" prop="车号">
					<u-input @click="showCarInputModel = true" v-model="form['车号']" placeholder="请输入" disabled />
					<view slot="right">
						<view @click="openCarNumQuickPicker">
							<u-icon name="order" size="30"></u-icon>
							<text style="font-size: 26upx;">历史记录</text>
						</view>
					</view>
				</u-form-item>
				<!-- </u-form> -->
			</view>
			<view style="height: 30upx;"></view>
			<view
				style="width: 690upx;margin-left: 30upx;box-shadow: 0 0 10upx #C0C4CC;padding: 30upx;border-radius: 16upx;">
				<view style="font-weight: bold;">其他信息</view>
				<!-- <u-form :model="form" ref="uForm3" label-width="160"> -->
				<u-form-item v-if="formType==='1' || formType ==='3'" label="货物名称" prop="货物名称" right-icon="arrow-right">
					<u-input @click="changePickerShowStatus('pickerShow1')" placeholder="请选择货物名称" v-model="form['货物名称']"
						disabled />
				</u-form-item>
				<u-form-item v-if="formType==='1' || formType ==='2'" label="供货单位" prop="供货单位" right-icon="arrow-right">
					<u-input @click="changePickerShowStatus('pickerShow2')" placeholder="请选择供货单位" v-model="form['供货单位']"
						disabled />
					<!-- <view slot="right" style="color: #2979ff;font-size: 20upx;" @click="userInput('供货单位')">
						<u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
						<text>手动输入</text>
					</view> -->
				</u-form-item>
				<u-form-item v-if="formType==='1' || formType ==='2'" label="收货单位" prop="收货单位" right-icon="arrow-right">
					<u-input @click="changePickerShowStatus('pickerShow3')" placeholder="请选择收货单位" v-model="form['收货单位']"
						disabled />
					<!-- <view slot="right" style="color: #2979ff;font-size: 20upx;" @click="userInput('收货单位')">
						<u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
						<text>手动输入</text>
					</view> -->
				</u-form-item>
				<view v-if="userInfo.AccountInfo">
					<u-form-item label="产地" prop="产地" right-icon="arrow-right"
						v-if="userInfo.AccountInfo.type === '1' && formType !=='2'">
						<u-input @click="changePickerShowStatus('pickerShow4')" placeholder="请选择产地" v-model="form['产地']"
							disabled />
						<!-- <view slot="right" style="color: #2979ff;font-size: 20upx;" @click="userInput('产地')">
							<u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
							<text>手动输入</text>
						</view> -->
					</u-form-item>
				</view>
				<view v-else>
					<!-- formType==='1' || formType ==='3' -->
					<u-form-item label="产地" prop="产地" right-icon="arrow-right" v-if="formType==='1' || formType ==='3'">
						<u-input @click="changePickerShowStatus('pickerShow4')" placeholder="请选择产地" v-model="form['产地']"
							disabled />
						<!-- <view slot="right" style="color: #2979ff;font-size: 20upx;" @click="userInput('产地')">
							<u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
							<text>手动输入</text>
						</view> -->
					</u-form-item>
				</view>


				<!-- <u-form-item label="皮重范围" prop="皮重范围">
					<u-input placeholder="请输入" v-model="form['皮重范围']" />
				</u-form-item> -->

				<!-- <u-form-item label="开关"><u-switch slot="right" v-model="switchVal"></u-switch></u-form-item> -->
				<!-- </u-form> -->
			</view>

			<view style="display: flex;justify-content: center;margin-top: 50upx;">
				<u-button @click="submit()" type="primary" shape="circle" size="medium " style="width: 70%;">
					{{formType==='2'?'生成二维码':'提 交'}}
				</u-button>
			</view>
			<view style="height: 100upx;"></view>
			<u-picker @confirm="pickCarType" :range="carTypes" :range-key="'label'" v-model="carTypePickerShow"
				mode="selector"></u-picker>
			<u-picker @confirm="pickerConfirm($event, '货物名称')" :range-key="'货物名称'" :range="huo_wu_ming_cheng"
				v-model="pickerShow1" mode="selector"></u-picker>
			<u-picker @confirm="pickerConfirm($event, '供货单位')" :range-key="'单位名称'" :range="gong_huo_dan_wei"
				v-model="pickerShow2" mode="selector"></u-picker>
			<u-picker @confirm="pickerConfirm($event, '收货单位')" :range-key="'单位名称'" :range="shou_huo_dan_wei"
				v-model="pickerShow3" mode="selector"></u-picker>
			<u-picker @confirm="pickerConfirm($event, '产地名称')" :range-key="'产地名称'" :range="chan_di"
				v-model="pickerShow4" mode="selector"></u-picker>
			<!-- 快捷选择车牌号 -->
			<u-picker @confirm="quickSelectCarNum($event)" :range="carNumQuickPickerOptions"
				v-model="showCarNumQuickPicker" mode="selector"></u-picker>
			<!-- 快捷选择 司机姓名 -->
			<u-picker @confirm="quickSelectCarUserName($event)" :range="carUserNameQuickPickerOptions"
				v-model="showCarUserNameQuickPicker" mode="selector"></u-picker>
			<!-- 手机号快捷选择 -->
			<u-picker @confirm="quickSelectPhoneNum($event)" :range="phoneNumQuickPickerOptions"
				v-model="showPhoneNumQuickPicker" mode="selector"></u-picker>

			<u-modal v-model="showInputModel" :title="inputModelTitle" show-cancel-button @confirm="userInputConfirm">
				<view style="padding: 20upx;">
					<u-input v-model="inputModelValue" type="text" :border="true"
						:placeholder="'请输入' + inputModelKey" />
				</view>
			</u-modal>

			<u-keyboard mode="car" @change="carInputValueChange" @backspace="carInputBackspace"
				v-model="showCarInputModel"></u-keyboard>
		</u-form>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState('account', ['token', 'userInfo'])
		},
		data() {
			return {
				formType: '1',
				form: {
					驾驶员姓名: '',
					联系电话: '',
					卡号: '',
					车号: '',
					类型编码: '0',
					类型名称: '',
					皮重: '',
					货物名称: '',
					货物编号: '',
					供货单位: '',
					供货单位编号: '',
					收货单位: '',
					收货单位编号: '',
					备注: '',
					产品规格: '',
					产品规格编号: '',
					场区名称: '',
					场区编号: '',
					产地: '',
					产地编号: '',
					account: ''
				},
				carTypes: [{
						label: '原料车辆',
						value: '1'
					},
					{
						label: '矿粉车辆',
						value: '0'
					}
					// {
					// 	label: '内部车辆',
					// 	value: '3'
					// }
				],
				switchVal: false,
				carTypePickerShow: false,
				rules: {
					货物名称: [{
						required: true,
						message: '请选择货物名称 ',
						trigger: ['blur']
					}],
					货物编号: [{
						required: true,
						message: '请输入货物编号 ',
						trigger: ['blur']
					}],
					供货单位: [{
						required: true,
						message: '请输入或选择供货单位 ',
						trigger: ['blur']
					}],
					收货单位: [{
						required: true,
						message: '请输入或选择收货单位 ',
						trigger: ['blur']
					}],
					驾驶员姓名: [{
						required: true,
						message: '请输入驾驶员姓名',
						trigger: ['blur']
					}],

					车号: [{
						required: true,
						message: '请输入车牌号',
						trigger: ['blur']
					}],
					// 字段名称
					联系电话: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur']
						}
					]
				},
				inputModelTitle: '',
				inputModelValue: '',
				inputModelKey: '',
				showInputModel: false,
				shou_huo_dan_wei: [],
				gong_huo_dan_wei: [],
				huo_wu_ming_cheng: [],
				chan_di: [],
				pickerShow1: false, // 控制货物名称 选择器
				pickerShow2: false, // 控制供货单位
				pickerShow3: false, // 控制收货单位 选择器
				pickerShow4: false, // 控制 产地
				carList: [],
				showCarInputModel: false, //控制车牌号专用键盘 显隐

				// 快捷选择
				showCarNumQuickPicker: false, //控制 车牌号快捷选择器 显隐
				showCarUserNameQuickPicker: false, //控制 驾驶员姓名快捷选项 显隐
				showPhoneNumQuickPicker: false, // 控制 手机号 快捷选择 显隐
				carNumQuickPickerOptions: [], //车牌号快捷选择的 选项值
				carUserNameQuickPickerOptions: [], //驾驶员姓名快捷选项
				phoneNumQuickPickerOptions: [], //手机号 快捷选择 选项
			};
		},

		methods: {
			// 打开车牌号快捷输入
			openCarNumQuickPicker() {
				this.showCarNumQuickPicker = true;
			},
			// 打开 驾驶员姓名 快捷选择
			openCarUserNameQuickPicker() {
				this.showCarUserNameQuickPicker = true;
			},
			// 打开 手机号 快捷选择
			openPhoneNumQuickPicker() {
				this.showPhoneNumQuickPicker = true;
			},
			// 快捷输入车牌号,确认
			quickSelectCarNum(e) {
				this.form['车号'] = this.carNumQuickPickerOptions[e[0]];
			},
			// 快捷输入 司机姓名,确认
			quickSelectCarUserName(e) {
				this.form['驾驶员姓名'] = this.carUserNameQuickPickerOptions[e[0]];
			},
			// 快捷输入 手机号 确认
			quickSelectPhoneNum(e) {
				this.form['联系电话'] = this.phoneNumQuickPickerOptions[e[0]];
			},
			// 获取已经添加的车辆列表
			getCarList() {
				uni.showLoading({
					title: '加载中'
				})
				this.$ajax.get({
					url: "/Car/getList?status=1"
				}).then(res => {
					setTimeout(() => {
						uni.hideLoading();
						let carNumQuickPickerOptions = []; //车辆快捷输入 的选项
						let carUserNameQuickPickerOptions = []; //司机姓名快捷输入 的选项
						let phoneNumQuickPickerOptions = []; //手机号 快捷输入 选项
						if (res.data.length) {
							res.data.forEach(item => {
								carNumQuickPickerOptions.push(item['车号']) //车辆快捷输入 的选项
								carUserNameQuickPickerOptions.push(item['驾驶员姓名']) //驾驶员姓名快捷输入 的选项
								phoneNumQuickPickerOptions.push(item['联系电话'])
							})
						}
						this.carNumQuickPickerOptions = [...new Set(
							carNumQuickPickerOptions)]; //车辆快捷输入 的选项
						this.carUserNameQuickPickerOptions = [...new Set(
							carUserNameQuickPickerOptions)]; //驾驶员姓名快捷输入 的选项
						this.phoneNumQuickPickerOptions = [...new Set(
							phoneNumQuickPickerOptions)]; //驾驶员姓名快捷输入 的选项
					}, 1000)

				})
			},

			changePickerShowStatus(key) {
				if (key === 'pickerShow4' && this.formType === '3') {
					if (!this.form['货物名称']) {
						uni.showToast({
							title: '请先选择货物',
							icon: 'none'
						});
						return;
					}
					this[key] = !this[key];
					return
				}
				if (key === 'pickerShow4' && this.userInfo && this.userInfo.AccountInfo.type === '1') {
					// 先判断是否选择了货物
					if (!this.form['货物名称']) {
						uni.showToast({
							title: '请先选择货物',
							icon: 'none'
						});
						return;
					}
				}



				this[key] = !this[key];
			},
			carInputBackspace() {
				if (this.form['车号'].length) this.form['车号'] = this.form['车号'].substr(0, this.form['车号'].length - 1);
				console.log(this.form['车号']);
			},
			carInputValueChange(val) {
				this.form['车号'] += val;
				console.log(this.form['车号']);
			},
			userInput(key) {
				this.inputModelKey = key;
				this.inputModelTitle = '手动输入' + key;
				this.showInputModel = true;
			},
			userInputConfirm() {
				this.form[this.inputModelKey] = this.inputModelValue;
			},
			pickerConfirm(pickedArr, key) {
				let pickIndex = pickedArr[0];
				if (key == '供货单位') {
					let item = this.gong_huo_dan_wei[pickIndex];
					this.form['供货单位'] = item['单位名称'];
					this.form['供货单位编号'] = item['编码'];
				}
				if (key == '收货单位') {
					let item = this.shou_huo_dan_wei[pickIndex];
					this.form['收货单位'] = item['单位名称'];
					this.form['收货单位编号'] = item['编码'];
				}
				if (key == '货物名称') {
					let item = this.huo_wu_ming_cheng[pickIndex];
					console.log(item);
					this.form['货物名称'] = item['货物名称'];
					this.form['货物编号'] = item['编码'];
					// 选择完货物后 查询对应的 产地 // AccountInfo.type 1=>供应商（原料车）  2=>销售客户（矿粉车）
					if (this.formType === '3') {

					} else {
						if (this.userInfo.AccountInfo.type !== '1') {
							// 矿粉车辆不用选择 产地
							return
						}
					}

					this.$ajax
						.get({
							url: '/PickerOptions/chan_di?huowucode=' + item['编码']
						})
						.then(res => {
							res.data.forEach(item => {
								item['产地名称'] = item.Name;
								item['产地编号'] = item.Code;
							});
							this.chan_di = res.data;
						});

				}
				if (key == '产地名称') {
					let item = this.chan_di[pickIndex];
					console.log(item);
					this.form['产地'] = item['产地名称'];
					this.form['产地编号'] = item['产地编号'];
				}
			},
			pickCarType(pickedArr) {
				let pickIndex = pickedArr[0];
				this.form['类型名称'] = this.carTypes[pickIndex].label;
				this.form['类型编码'] = this.carTypes[pickIndex].value || '';
			},
			submit() {
				this.form['卡号'] = this.form['车号'];
				
				if(this.formType === '3'){
					this.form['类型名称'] = '原料车辆';
					this.form['类型编码'] = '1';
					if(!this.form['产地']){
						uni.showToast({
							title:"请完善产地信息",
							icon:"none"
						})
						return
					}
				}else{ 
					// AccountInfo.type  类型编码 1=>供应商  2=>销售客户
					if (this.userInfo.AccountInfo && this.userInfo && this.userInfo.AccountInfo.type === '1') {
						this.form['类型名称'] = '原料车辆';
						this.form['类型编码'] = '1';
						
					} else {
						this.form['类型名称'] = '矿粉车辆';
						this.form['类型编码'] = '0';
					}
				}
				

				if (this.formType === '2') {
					// 生成供司机扫码的二维码

					let data = {
						...this.form,
						token: this.token
					}
					uni.setStorageSync("yuan_liao_qrcode_data", data)
					uni.navigateTo({
						url: "/pages/oa/car-list/pre-order-detail/pre-order-detail"
					})
					return
				}



				this.$refs.uForm1.validate(valid => {
					if (valid) {
						uni.showLoading({
							title: '请稍后'
						});
						this.$ajax
							.post({
								url: '/Car/addCar',
								header: {
									token: this.form.token,
								},
								data: {
									...this.form
								}
							})
							.then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '登记成功'
									});
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/oa/home/home'
										});
									}, 1000);
								}
								uni.removeStorageSync("agent_token")
							});
						uni.hideLoading();
					} else {
						console.log('验证失败');
					}
				});
			},
			initOptions() {
				// 供货单位
				this.$ajax
					.get({
						url: '/PickerOptions/gong_huo_dan_wei'
					})
					.then(res => {
						this.gong_huo_dan_wei = res.data;
						this.form['供货单位'] = this.gong_huo_dan_wei[0]['单位名称'];
					});
				// 收货单位
				this.$ajax
					.get({
						url: '/PickerOptions/shou_huo_dan_wei'
					})
					.then(res => {
						this.shou_huo_dan_wei = res.data;
						this.form['收货单位'] = this.shou_huo_dan_wei[0]['单位名称'];
					});

				// 产地
				// if (this.userInfo && this.userInfo.AccountInfo.type === '0') {
				// this.$ajax
				// 	.get({
				// 		url: '/PickerOptions/chan_di'
				// 	})
				// 	.then(res => {
				// 		res.data.forEach(item => {
				// 			item['产地名称'] = item.Name;
				// 			item['产地编号'] = item.Code;
				// 		});
				// 		this.chan_di = res.data;
				// 	});
				// }

				// 货物名称
				this.$ajax
					.get({
						url: '/PickerOptions/huo_wu_ming_cheng'
					})
					.then(res => {
						res.data.forEach(item => {
							if (!item['货物名称']) {
								item['货物名称'] = item.name;
							}
							if (!item['编码']) {
								item['编码'] = item.code;
							}
						});
						this.huo_wu_ming_cheng = res.data;
					});
			}
		},
		destroyed() {
			uni.removeStorageSync("agent_token")
		},
		mounted() {
			this.initOptions();
			this.getCarList()
		},
		onLoad(opt) {
			this.formType = opt.type || '1';
			if (this.formType === '3') {
				this.form = uni.getStorageSync("driver_pre_order_data");
			}
			uni.setNavigationBarTitle({
				title: '登记车辆'
			});
		},
		onReady() {
			this.$refs.uForm1.setRules(this.rules);
		}
	};
</script>

<style lang="scss"></style>
